<template>
    <div class="wl-query">
        <div class="query_content">
              <slot name="main"></slot>
              <slot v-if="showAdv" name="adv"></slot>
            <el-button class="btn-query" @click="query" type="success">查询</el-button>
        </div>
        <div v-if="needAdv" class="adv_query">
            <el-button class="btn-adv" @click="toggleAdv" type="success">高级查询</el-button>
        </div>
    </div>
</template>
<script>
export default {
  props: {
    needAdv: {
      type: Boolean,
      default: true
    }
  },

  data() {
    return {
      showAdv: false
    };
  },

  methods: {
    query() {
      this.$emit("doQuery", this.showAdv);
    },
    toggleAdv() {
      this.showAdv = !this.showAdv;
      this.$emit("showAdv", this.showAdv);
    }
  },
  computed: {}
};
</script>


<style scoped>
.btn-query {
  margin-left: 10px;
  max-height: 32px;
}

.btn-adv {
  height: 32px;
}
</style>
